<template>
	<view>
		<!--广告-->
		<view class="commit" v-if="showadtitle" :style="{width:lineobject.width}">
			<text :style="{left: lineobject.left}">广告</text>
		</view>
		<!--轮播图广告-->
		<swiper class="swipers" autoplay="true" >
			<swiper-item v-for="(item,index) in adverlist" :key="index">
				<image :src="item.img" mode="aspectFill" @click="openAd(index)"></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props: {
			//是否关闭广告标题
			showadtitle: {
				type: Boolean,
				default: true
			},
			//广告类型
			advertype: {
				type: String,
				default: 'index'
			},
			lineobject: {
				type: Object,
				default: () => {
					return {
						width: '90%',
						left: '280rpx'
					}
				}
			}
		},
		data() {
			return {
				//线的长度
				// lineobject:{
				// 	type:Object,
				// 	default:{
				// 		width:'90%',
				// 		left:'280rpx'
				// 	}
				// },
				adverlist: []
			}
		},
		created() {
			this.getadver(this.advertype)
		},
		methods: {
			//打开广告 type 1视频 2跳外部网页 3跳app内
			openAd(index) {
				let Adinfo = this.adverlist[index]
				console.log(Adinfo)
				if (Adinfo.type == 1) {
					this.showAd()
				} else if(Adinfo.type==2) {
					plus.runtime.openURL(Adinfo.url)
				}else{
					uni.navigateTo({
						url:Adinfo.url
					})
				}
			},
			//获取广告数据
			getadver(adtype) {
				this.$HttRequest({
					url: '/index/ad',
					param: ''
				}).then((res) => {
					console.log(res, adtype)
					if (res.status === 10000) {
						this.adverlist = res.data[adtype]
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			showAd() {
				this.$ttylAd.show(this.$common.state.adpid, (res) => {
					console.log("onclose")
					console.log(res)
					// 用户点击了【关闭广告】按钮
					if (res && res.isEnded) {
						// 正常播放结束
						console.log("onClose " + res.isEnded);
					} else {
						// 播放中途退出
						console.log("onClose " + res.isEnded);
					}
					// 可选预加载下一条广告数据，减少加载等待时间，调用此 API 不会显示loading，不影响业务
				}, (err) => {
					
					console.log(err) // {code: code, errMsg: message}
					// 广告无法显示，输出错误信息，可以采集数据上报以便分析
				})
			}
		}
	}
</script>

<style lang="scss">
	.commit {
		position: relative;
		// width: 72%;
		margin: 0 auto;
		border-top-style: solid;
		border-top-width: 1rpx;
		border-top-color: #cccccc;
		margin-bottom: 20rpx;

		text {

			font-size: 25rpx;
			position: absolute;
			color: #d3d3d3;
			top: -25rpx;
			// left: 220rpx;
			width: 100rpx;
			height: 50rpx;
			background-color: #f0f0f0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.swipers {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		margin-top: 40rpx;
		height: 250rpx;

		swiper-item {
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				border-radius: 20rpx;
				width: 694rpx;
				height: 250rpx;
			}
		}

	}
</style>
